<template>
  <div>
    <ElButton @click="start()">开始一局</ElButton>
    <div class="mine" ref="mineZone">
      <template v-for="(f, i) in mine.holes" :key="i">
        <hr />
        <template v-for="(e, j) in mine.holes[i]" :key="j">
          <MineButton
            :ref="
              (el) => {
                mine.holesDom[i][j] = el
              }
            "
            :meta="e"
            @marked2todo="marked2todo"
            @todo2marked="todo2marked"
            @todo2opened="todo2opened"
            @opened2opened="opened2opened"
          ></MineButton>
        </template>
      </template>
    </div>
    <div>{{ mine.openedHoles }}</div>
    <div>{{ mine.stateMine }}</div>
  </div>
</template>
<script lang="ts" setup>
import { Hole, nineCount } from '@/entity/mine.entity'

const zone = {
  rows: 4,
  cols: 4,
  boomsCount: 3
}
const mine: any = reactive({
  stateMine: 'pending',
  openedHoles: 0,
  holes: [] as Array<Array<Hole>>,
  holesDom: [] as Array<Array<any>>,
  booms: [] as Array<Hole>,
  frees: [] as Array<Hole>
})
const mineZone: HTMLElement = ref(null)

// let { holes, booms } = mine

// let holes: Array<Array<Hole>> = []
// let booms: Array<Hole> = []

const start = () => {
  console.log('Start Game!')
  mine.openedHoles = 0
  mine.stateMine = 'pending'
  mine.booms = []
  mine.frees = []
  mine.holes = []
  mine.holesDom = []
  //   初始化坑位
  mine.holes = new Array(zone.rows)
  mine.holesDom = new Array(zone.rows)
  for (let i = 0; i < mine.holes.length; i++) {
    mine.holes[i] = new Array(zone.cols)
    mine.holesDom[i] = new Array(zone.cols)
  }
  for (let i = 0; i < mine.holes.length; i++) {
    for (let j = 0; j < mine.holes[i].length; j++) {
      mine.holes[i][j] = new Hole()
      mine.holesDom[i][j] = null
    }
  }
  //   校准坑位xy信息 value信息等会校准
  for (let i = 0; i < mine.holes.length; i++) {
    for (let j = 0; j < mine.holes[i].length; j++) {
      mine.holes[i][j].x = i
      mine.holes[i][j].y = j
    }
  }
  //  布雷 取随机位置(x,y)为雷点，xy均为随机数即可，需要考虑是否雷点重复
  //   **约定 value = 9 代表此为雷点 0-8代表周围九宫格内雷的个数 -1表示初始化位赋值
  for (let i = 0; i < zone.boomsCount; ) {
    let boomX = Math.floor(Math.random() * zone.rows)
    let boomY = Math.floor(Math.random() * zone.cols)
    // console.log(boomX, boomY)
    let boomHole = mine.holes[boomX][boomY]
    if (boomHole.value === -1) {
      mine.holes[boomX][boomY].value = 9

      mine.booms.push(boomHole)
      i++
    }
  }

  //   提示信息 1-8
  for (let i = 0; i < mine.holes.length; i++) {
    // console.log("----------")
    for (let j = 0; j < mine.holes[i].length; j++) {
      let target = mine.holes[i][j]
      if (target.value === 9) {
        continue
      }
      // 标记信息 计数
      // let count = 0
      // // console.log('current: ', mine.holes[i][j], count)

      // for (let m = -1; m <= 1; m++) {
      //   for (let n = -1; n <= 1; n++) {
      //     // mine.holes[i+m][j+n]
      //     if (mine.holes[i + m] !== undefined) {
      //       if (mine.holes[i + m][j + n] !== undefined) {
      //         if (mine.holes[i + m][j + n].value === 9) {
      //           count++
      //         }
      //       }
      //     }
      //   }
      // }
      let count = nineCount(mine.holes, i, j)
      console.log('current: ', mine.holes[i][j], count)
      target.value = count
      mine.frees.push(target)
    }
  }

  console.log(mine.holes)
  console.log(mine.booms)
  console.log(mine.frees)
}

onMounted(() => {
  start()
})
const opened2opened = (meta: Hole) => {
  const target: Hole = mine.holes[meta.x][meta.y]
  if (target.state !== 'opened') {
    return
  }
  target.state = 'opened'
  let marks = 0
  let frees = []
  for (let m = -1; m <= 1; m++) {
    for (let n = -1; n <= 1; n++) {
      if (mine.holesDom[target.x + m] !== undefined) {
        if (mine.holesDom[target.x + m][target.y + n] !== undefined) {
          if (m === 0 && n === 0) continue
          if (mine.holes[target.x + m][target.y + n].state === 'marked') {
            marks++
          } else {
            frees.push(mine.holesDom[target.x + m][target.y + n])
          }
        }
      }
    }
  }
  if (marks === target.value) {
    for (let i = 0; i < frees.length; i++) {
      frees[i].leftClick()
    }
  }
  frees = []
}
const marked2todo = (meta: Hole) => {
  const target: Hole = mine.holes[meta.x][meta.y]
  if (target.state !== 'marked') {
    return
  }
  target.state = 'todo'
}
const todo2marked = (meta: Hole) => {
  const target: Hole = mine.holes[meta.x][meta.y]
  if (target.state !== 'todo') {
    return
  }
  target.state = 'marked'
}
const todo2opened = (meta: Hole) => {
  const target: Hole = mine.holes[meta.x][meta.y]
  // if(target)
  if (target.state !== 'todo') {
    return
  }
  target.state = 'opened'
  mine.openedHoles++
  // 后置事件
  //  判定 9 ？ 判定0 ？
  if (target.value === 9) {
    mine.openedHoles--
    lose()
    return
  }
  if (target.value === 0) {
    // for (let i = -1; i <= 1; i++) {
    //   for (let j = -1; i <= 1; j++) {
    //      mine.holesDom[target.x+i][target.y+j].leftClick()
    //   }
    // }
    // nineDo(target,(tt:Hole)=>{
    //   mine.holesDom[target.x+i][target.y+j].leftClick()
    // },mine.holes)

    for (let m = -1; m <= 1; m++) {
      for (let n = -1; n <= 1; n++) {
        if (mine.holesDom[target.x + m] !== undefined) {
          if (mine.holesDom[target.x + m][target.y + n] !== undefined) {
            if (m === 0 && n === 0) continue

            // 判定是todo状态才需要点击
            if (mine.holes[target.x + m][target.y + n].state === 'todo') {
              setTimeout(() => {
                mine.holesDom[target.x + m][target.y + n].leftClick()
              }, 200)
            }
          }
        }
      }

      // return count
    }
    return
  }
}
//  stateMine = 'win'
const win = () => {
  if (mine.stateMine !== 'pending') {
    return
  }
  mine.stateMine = 'win'
  ElMessageBox.alert('恭喜开启,disable所有button')
}
const lose = () => {
  if (mine.stateMine !== 'pending') {
    return
  }
  mine.stateMine = 'lose'
  ElMessageBox.alert('失败了,disable所有button')
  // mineZone
}
watch(
  () => mine.openedHoles,
  (n: number) => {
    console.log('xxxxxxxxxxxx')
    if (n >= zone.rows * zone.cols - zone.boomsCount) {
      win()
      return
    }
  },
  { immediate: true }
)
</script>
<style lang="scss" scoped>
.mine {
  display: inline-block;
  //   max-width: 800px;
  height: auto;
  border: 1px solid black;
}
.mine-button {
  width: 40px;
  height: 40px;
}
</style>
